<template>
    <el-card class="main">
    <template #header>
      <div class="main-top">
        <img class="top-avatar" :src="userInfo.avatar">
        <div class="top-name">{{ userInfo.name }}</div>
        <div class="top-update" @click="updateUserInfoDrawer = true"></div>
      </div>
    </template>
    <div class="main-center">
        <div class="center-menu" v-for="item in menuList" @click="look(item.type)" :class="{active:selectedBox==item.type}">{{ item.title }}</div>
    </div>
    <template #footer>
        <div v-show="selectedBox==1" class="main-footer">
            <div v-if="postList.length > 0">
                <div class="postList" v-for="post in postList">
                    <img class="postImage" :src="post.imageUrl"/>
                    <div class="postBody">
                        <div class="postTitle">
                            <span>{{ post.title }}</span>
                            <div class="postStatus" v-if="post.isShow==0">🟡审核中</div>
                            <div class="postStatus" v-if="post.isShow==1">🟢审核通过</div>
                        </div>
                        <div class="postContent">{{ post.content }}</div>
                        <div class="postTime">发布于&ensp;{{ post.createTime }}</div>
                    </div>
                    <div class="delPost"  @click="deletePost(post.id)">删除</div>
                </div>
            </div>
            <div v-else class="no-content-tip">您还未发布过帖子哦</div>
        </div>
        <div v-show="selectedBox==2" class="main-footer">
            <div v-if="videoList.length > 0">
                <div class="videoList" v-for="video in videoList">
                    <video controls :src="video.videoUrl" @play="onPlay" @pause="onPause" @ended="onEnded" class="videoVideo"></video>
                    <div class="videoBody">
                        <div class="videoTitle">
                            <span class="videoTitleSpan">{{ video.title }}</span>
                            <div class="videoStatus" v-if="video.isShow==0">🟡审核中</div>
                            <div class="videoStatus" v-if="video.isShow==1">🟢审核通过</div>
                        </div>
                        <div class="videoContent">{{ video.content }}</div>
                        <div class="videoTime">发布于&ensp;{{ video.createTime }}</div>
                    </div>
                    <div class="delPost"  @click="deleteVideo(video.id)">删除</div>
                </div>
            </div>
            <div v-else class="no-content-tip">您还未发布过戏曲哦</div>
        </div>
        <div v-show="selectedBox==3" class="main-footer">
            <div class="activityButton">
                <div class="title" v-for="item in activityMenuList" @click="lookActivity(item.type)" :class="{action:selectedActivityBox==item.type}">{{item.title}}</div>
            </div>
            <div v-if="selectedActivityBox === 1 && myActivityList.length > 0">
                <div class="myActivity">
                    <div class="activityList" v-for="(activity,index) in myActivityList">
                    <img class="activityImage" :src="activity.imageUrl"/>
                    <div class="activityBody">
                        <div class="activityTop">
                            <div class="activityTitle"><span>{{ activity.title }}</span></div>
                            <div class="activityStatus" v-if="activity.isShow==0">🔴已结束</div>
                            <div class="activityStatus" v-else-if="activity.isShow==1">🟢进行中</div>
                            <div class="activityStatus" v-else="activity.isShow==2">🟡审核中</div>
                        </div>
                        <div class="activityStandTime">{{ activity.startTime }}&ensp;~&ensp;{{ activity.endTime }}</div>
                        <div class="activityStandTime">地点：{{ activity.activityPlace }}&emsp;&emsp;&emsp;&emsp;需要人数：{{ activity.activityNum }}人</div>
                        <div class="activityContent">{{ activity.content }}</div>
                        <div class="activityTime">发布于&ensp;{{ activity.createTime }}</div>
                    </div>
                    <div class="activityCaozuo">
                        <div class="del" @click="deleteActivity(activity.activityId)">删除</div>
                        <div class="update" @click="updateActivity(index)">修改</div>
                    </div>
                </div>
                </div>
            </div>
            <div v-else-if="selectedActivityBox === 1" class="no-content-tip">您还未发布过活动哦</div>
            <div v-if="selectedActivityBox === 2 && myJoinActivityList.length > 0">
                <div class="myActivity">
                    <div class="activityList" v-for="activity in myJoinActivityList">
                        <img class="activityImage" :src="activity.imageUrl"/>
                        <div class="activityBody">
                            <div class="activityTop">
                                <div class="activityTitle"><span>{{ activity.title }}</span></div>
                                <div class="activityStatus" v-if="activity.isShow==0">🔴已结束</div>
                                <div class="activityStatus" v-else-if="activity.isShow==1">🟢进行中</div>
                                <div class="activityStatus" v-else="activity.isShow==2">🟡审核中</div>
                            </div>
                            <div class="activityStandTime">{{ activity.startTime }}&ensp;~&ensp;{{ activity.endTime }}</div>
                            <div class="activityStandTime">地点：{{ activity.activityPlace }}&emsp;&emsp;&emsp;&emsp;需要人数：{{ activity.activityNum }}人</div>
                            <div class="activityContent activityName"><strong>活动负责人：{{ activity.name }}</strong></div>
                            <div class="activityContent">{{ activity.content }}</div>
                            <div class="activityTime">发布于&ensp;{{ activity.createTime }}</div>
                            <div class="activityJoin" v-if="activity.isShow !=0" @click="Cancelreg(activity.activityId)">取消报名</div>
                        </div>
                    <!-- <div class="activityCaozuo"> -->
                        <!-- <div class="delPost"  @click="deleteActivity(activity.activityId)">删除</div> -->
                    <!-- </div> -->
                    </div>
                </div>
            </div>
            <div v-else-if="selectedActivityBox === 2" class="no-content-tip">您还未报名过活动哦</div>
        </div>
    </template>
  </el-card>

<!-- 修改个人信息的弹出框 -->
<el-drawer v-model="updateUserInfoDrawer" title="修改个人信息" :with-header="false" class="updateInformation">
    <div class="accountInformation">
        <a>账号信息</a>
    </div>
        <div class="updateUserBox">
            <h2 class="textBox">头像</h2>
    <el-upload
    class="avatar-uploader"
    style="width: 200px;"
    action="/api/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess1"
    :before-upload="beforeAvatarUpload1"
  >
    <img v-if="updateData.avatar" :src="updateData.avatar" class="avatar" style="width: 200px;" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
            <div class="thirdBox">
                <h2 class="textBox">个人昵称</h2>
                <el-input 
                    v-model="updateData.name"
                    size="large"
                    style="width: 200px"
                />
            </div>
            <div class="firstBox">
              <h2 class="textBox">账号</h2>
              <el-input 
                v-model="updateData.account"
                size="large"
                style="width: 200px"
              />
            </div>
            <div class="secondBox">
                <h2 class="textBox">登录密码</h2>
                <el-input 
                    v-model="updateData.password"
                    size="large"
                    type="password"
                    style="width: 200px"
                />
            </div>
                <div class="tijiao" @click="updateUserInfo()">提交修改</div>
        </div>
  </el-drawer>

<!-- 修改发布活动的弹出框 -->
<el-drawer v-model="updateActivityDrawer" title="修改发布的活动" :with-header="false">
    <div class="container">
        <div class="drawer-header">修改活动</div>    
        <el-form
        ref="ruleFormRef"
        style="max-width: 400px"
        :model="list"
        status-icon
        label-width="auto"
        class="demo-ruleForm"
    >
        <el-form-item label="活动名称" prop="title" >
        <el-input v-model="list.title"/>
        </el-form-item>
        <el-form-item label="活动内容" prop="content" >
        <el-input v-model="list.content" type="textarea" :autosize="{ minRows: 2, maxRows: 40 }"/>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime" >
            <el-date-picker
            v-model="list.startTime"
            type="datetime"
            placeholder="请选择活动开始时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
        />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime" >
            <el-date-picker
            v-model="list.endTime"
            type="datetime"
            placeholder="请选择活动结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="YYYY-MM-DD HH:mm:ss"
        />
        </el-form-item>        
        <el-form-item label="活动地点" prop="activityPlace" >
        <el-input v-model="list.activityPlace"/>
        </el-form-item>
        <el-form-item label="需要人数" prop="activityNum" >
        <el-input v-model="list.activityNum" style="width: 80px;"/>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="isShow" >
            <el-radio-group v-model="list.isShow">
                <el-radio :label="1">进行中</el-radio>
                <el-radio :label="0">已结束</el-radio>
            </el-radio-group>
        </el-form-item> -->
        <el-form-item label="活动封面" prop="imageUrl" >
            <el-upload
                class="avatar-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                accept=".jpg,.jpeg,.png"
            >
                <img v-if="list.imageUrl" :src="list.imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" @click="submitForm" class="fabu">发布</el-button>
        </div>
    </div>
  </el-drawer>

</template>
<script setup lang="ts">
import { ref } from 'vue';
import {updateUserInfoAPI,updateActivityInfoAPI,deleteActivityAPI,deletePostAPI,deleteVideoAPI,getUserInfoAPI,getMyPostListAPI,getMyVideoListAPI,getMyActivityListAPI,getJoinActivityListAPI} from '../../api/my'
import { getNoJoinActivityAPI } from '../../api/activity';
import { onMounted } from 'vue';
import useCounter from '../../stores/pinia'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'; // 引入 ElMessage
import { parseJwt } from '../../stores/pinia'
import { useRouter } from 'vue-router';

const selectedBox=ref(1)
const router=useRouter()
const selectedActivityBox=ref(1)
const updateUserInfoDrawer = ref(false)
const updateActivityDrawer = ref(false)
const counterStore=useCounter()
const currentActivityId = ref(1);
const updateData =  ref({
})
const list = ref(
{
    // activityId:1,
    // startTime:'2024-08-27',
    // endTime:'2025-11-11',
    // imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
    // isShow:0,
    // activityPlace:'深圳',
    // activityNum:100,
    // title: '环保志愿活动',
    // content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
}
)
// //通过activityId获取当前活动信息
// const getcurrentActivity=async()=>{
//     let params={
//         activityId: currentActivityId.value 
//     }
//     console.log(params)
//     const result=await getActivityListAPI(params)
//     console.log("返回的数据结果",result.data.data)
//     // 这里应该更新 list 的值
//     list.value = result.data;
// }

// 修改封面成功处理函数
const handleAvatarSuccess = (response, file, fileList) => {
    list.value.imageUrl = response.data.url; // 后端返回的文件 URL 在 response.data.url 中
    ElMessage.success('封面上传成功');
};

// 修改封面之前的处理函数
const beforeAvatarUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        ElMessage.error('只能上传 JPG/PNG 格式的图片');
        return false;
    }
    return true;
};

//修改后发布
const submitForm = async () => {
    try {
        // console.log("修改后的活动",list.value)
        const result = await updateActivityInfoAPI(list.value);
        if (result.data.code === 0) {
            ElMessage.success('操作成功');
            updateActivityDrawer.value=false
            getActivity()
        } else if(result.data.code === 1){
            ElMessage.error('操作失败');
        }
    } catch (error) {
        console.error('修改活动失败:', error);
        ElMessage.error('修改活动失败');
    }
};
//删除活动
const deleteActivity = async(activityId) => {
  try {
    // 调用后端删除接口
    const result = await deleteActivityAPI({activityId:activityId});
    // 假设后端返回的响应中包含 success 字段表示操作是否成功
    if (result.data.code === 0) {
      // 删除成功，给出提示信息
      ElMessage.success('活动删除成功');
      // 更新前端活动列表，过滤掉已删除的活动
    //   myActivityList.value = myActivityList.value.filter(activity => activity.activityId !== activityId);
    getActivity()
    getJoinActivity()
    } else if(result.data.code === 1){
      // 删除失败，给出提示信息
      ElMessage.error('活动删除失败，请稍后重试');
    }
  } catch (error) {
    // 接口调用出错，给出提示信息
    console.error('删除活动时发生错误:', error);
    ElMessage.error('活动删除失败，网络错误，请稍后重试');
  }
};
//删除帖子
const deletePost = async(postId) => {
  try {
    const result = await deletePostAPI({postId:postId});
    // console.log(result.data)
    if (result.data.code === 0) {
      // 删除成功，给出提示信息
      ElMessage.success('帖子删除成功');
      // 更新前端活动列表，过滤掉已删除的活动
      postList.value = postList.value.filter(post => post.postId !== postId);
    } else if(result.data.code === 1){
      // 删除失败，给出提示信息
      ElMessage.error('帖子删除失败，请稍后重试');
    }
  } catch (error) {
    // 接口调用出错，给出提示信息
    console.error('删除帖子时发生错误:', error);
    ElMessage.error('帖子删除失败，网络错误，请稍后重试');
  }
};
//删除戏曲
const deleteVideo = async (videoId) => {
  try {
    const result = await deleteVideoAPI({videoId:videoId});
    // const result = await deleteVideoAPI(videoId);
    if (result.data.code === 0) {
      // 删除成功，给出提示信息
      ElMessage.success('戏曲删除成功');
      // 更新前端活动列表，过滤掉已删除的活动
      videoList.value = videoList.value.filter(video => video.videoId !== videoId);
    } else if(result.data.code === 1){
      // 删除失败，给出提示信息
      ElMessage.error('戏曲删除失败，请稍后重试');
    }
  } catch (error) {
    // 接口调用出错，给出提示信息
    console.error('删除戏曲时发生错误:', error);
    ElMessage.error('戏曲删除失败，网络错误，请稍后重试');
  }
};
//取消报名
const Cancelreg = async(activityId)=>{
    let params={
        activityId:activityId,
        userId:userInfo.value.id
    }
    console.log("取消报名的值",params)
    const result = await getNoJoinActivityAPI(params);
    getJoinActivity()
    // console.log(result.data);
}
const handleAvatarSuccess1: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // console.log(response.data)
  updateData.value.avatar = response.data
  // console.log(updateData.value.avatar)
}
const updateUserInfo=async()=>{
    let params={
        password:updateData.value.password,
        userId:updateData.value.id,
        avatar:updateData.value.avatar,
        name:updateData.value.name,
        account:updateData.value.account
    }
    // console.log(params)
    const result=await updateUserInfoAPI(params)
    // console.log("修改反馈",result.data)
    if(result.data.code==0){
        ElMessage({
    message: '信息修改成功',
    type: 'success',
  })
//     getUserInfo()
//     const ss=ref([])
//     ss.value=parseJwt(result.data.data).claims
//   console.log("士大夫大师傅似的"+ss.value)
  
  counterStore.jwt=result.data.data
//   console.log(result.data.data+"修改后的token"+counterStore.jwt)
  location.reload();
  updateUserInfoDrawer.value=false
    }
}

const beforeAvatarUpload1: UploadProps['beforeUpload'] = (rawFile) => {
  // console.log(rawFile)
  const isCorrectExtension = rawFile.name.endsWith('.jpg') || rawFile.name.endsWith('.png')||rawFile.name.endsWith('.jpeg');
  if (!isCorrectExtension) {
    ElMessage.error('只能上传jpg或png格式的图片')
    return false
  } else if (rawFile.size / 1024/512 > 1.5) {
    ElMessage.error('图片大小不能超过1MB!')
    return false
  }
  return true
}
const userAvatarUrl = ref("https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg")
// const hoZhui=ref("?x-oss-process=video/snapshot,t_0,f_jpg")
const showChangeText = ref(false)
//根据id获取用户头像
// const fetchAvatarUrl = async () => {
//   try {
//     // 通过userInfo,获取头像地址
    
//     // 将后端返回的头像地址赋值给 userAvatarUrl
//   } catch (error) {
//     console.error('获取用户头像地址失败:', error);
//   }
// };
// 引用文件输入框
const fileInput = ref(null);

// 打开文件选择框
const changeAvatar = () => {
  fileInput.value.click();
};
// 处理文件选择
const handleFileChange = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      userAvatarUrl.value = e.target.result;
      // 发送图片地址到后端
      sendAvatarUrlToBackend(userAvatarUrl.value);
    };
    reader.readAsDataURL(file);
  }
};
// 发送头像地址到后端
const sendAvatarUrlToBackend = async (avatarUrl) => {
  try {
    //const response = await updateUserInfoAPI(avatarUrl)
    const response = await updateUserInfoAPI({ avatar: avatarUrl })
    console.log('头像地址更新成功:', response.data);
  } catch (error) {
    console.error('头像地址更新失败:', error);
  }
};

const userInfo=ref({
    // id:1,
    // avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",
    // name:"迪迦"
})

const postList=ref([
    // {isShow:2,id:1,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"豆腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffff腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党ff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:3,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干塞飞飞飞e分dfvfdvdfvdfvdfv为氛围分为威风威风威风威风为为发风格化风格化热威风威风为威风威风韩国",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:4,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概分的高分都是高富帅股份大股东党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:5,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党呱呱呱呱呱呱呱呱呱古古怪怪法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:6,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:7,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:8,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:9,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:10,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:11,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:12,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆大夫士大夫大师威风大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:13,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:14,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,id:15,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
  ])

const videoList=ref([
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:1,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干fghfghfffffff呱呱呱",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:2,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:2,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规踩踩从党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:3,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干塞飞飞飞e分dfvfdvdfvdfvdfv",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:4,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概分的高党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:5,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大呱呱古古怪怪法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:6,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:7,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:8,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:9,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:10,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:11,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:12,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆大夫党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:13,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:14,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {isShow:2,content:"发热瑞风瑞风热热风热风热风热风热风热威风威风威风威风威风无法 威风威风威风威风",videoId:15,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
  ])

const myActivityList=ref([
    // {name:"威威呃呃呃",content:"发v地方v地方v地方v格律二",isShow:1,activityPlace:"中国",startTime:"2022-12-1-1",endTime:"2023-1-33-2",activityNum:23,activityId:1,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"豆腐干fghfghfffffffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghf怪大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {name:"威威呃呃呃",content:"发v地方v地方v地方v格律二",isShow:1,activityPlace:"中国",startTime:"2022-12-1-1",endTime:"2023-1-33-2",activityNum:23,activityId:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {name:"威威呃呃呃",content:"发v地方v地方v地方v格律二",isShow:1,activityPlace:"中国",startTime:"2022-12-1-1",endTime:"2023-1-33-2",activityNum:23,activityId:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
])

const myJoinActivityList=ref([
    // {name:"威威呃呃呃",content:"发v地方v地方v地方fghfghgfhv格律二",isShow:1,activityPlace:"中国",startTime:"2022-12-1-1",endTime:"2023-1-33-2",activityNum:23,activityId:1,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"豆腐干fghfghfffffffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党腐干fghf怪大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"三dfghtrjytjht突然恒天然恒天然三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {name:"威威呃呃呃",content:"fghgfhgfhgh",isShow:1,activityPlace:"中国",startTime:"2022-12-1-1",endTime:"2023-1-33-2",activityNum:23,activityId:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {name:"威威呃呃呃",content:"发v地方v地fghgfhgfhredyrtjtjr方v地方v格律二",isShow:1,activityPlace:"中国",startTime:"2022-12-1-1",endTime:"2023-1-33-2",activityNum:23,activityId:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",content:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
])
const menuList=ref([
    {id:1,title:"帖子",type:1},
    {id:2,title:"戏曲",type:2},
    {id:3,title:"活动",type:3}
])
const activityMenuList=ref([
    {id:1,title:"我发布的活动",type:1},
    {id:2,title:"我参与的活动",type:2},
])

const getUserInfo=async()=>{
    let params={
        userId:userInfo.value.id
    }
    const result=await getUserInfoAPI(params)
    // console.log("用户信息：",result.data.data)
    userInfo.value=result.data.data
    updateData.value = { ...userInfo.value };
    // updateData.value=result.data.data
    // console.log("修改的用户信息",updateData.value)
}
const getPost=async()=>{
    let params={
        userId:userInfo.value.id
    }
    const result=await getMyPostListAPI(params)
    postList.value=result.data.data.list
    // console.log("获取帖子反馈",result.data)
}
const getVideo=async()=>{
    let params={
        userId:userInfo.value.id
    }
    const result=await getMyVideoListAPI(params)
    videoList.value=result.data.data.list
    // console.log("戏曲反馈",result.data.data)
}
const getActivity=async()=>{
    let params={
        userId:userInfo.value.id
    }
    const result=await getMyActivityListAPI(params)
    // console.log("发布活动反馈",result.data.data)
    myActivityList.value=result.data.data.list
}
const getJoinActivity=async()=>{
    let params={
        userId:userInfo.value.id
    }
    const result=await getJoinActivityListAPI(params)
    // console.log("参加活动反馈",result.data.data)
    myJoinActivityList.value=result.data.data.list
}
const look=(type)=>{
    // console.log("显示不同的盒子",type)
    selectedBox.value=type
    if(type==1){
        getPost()
    }else if(type==2){
        getVideo()
    }else if(type==3){
        getActivity()
    }
}
const lookActivity=(type)=>{
    // console.log("显示不同的盒子",type)
    selectedActivityBox.value=type
    if(type==1){
        getActivity()
    }else if(type==2){
        getJoinActivity()
    }
}
const updateActivity=(index)=>{
    updateActivityDrawer.value=true
    // console.log("所有修改的活动id",index)
    list.value={...myActivityList.value[index]}
    // list.value=myActivityList.value[index]
}

onMounted(() => {
//   fetchAvatarUrl();
//   getcurrentActivity();
const jwt=counterStore.jwt;
if(jwt!=null){
    userInfo.value=parseJwt(jwt).claims
    getUserInfo()
    getPost()
}else{
        ElMessage({
    message: '您还未登录，请先前往登录！',
    type: 'warning',
  })
      router.push('/login')
    }
});
</script>
<style scoped>
.tijiao{
    /* display: block; */
  /* margin: auto; */
  width: 30%;
  font-size:24px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  color: #474a59;
  padding: 0 6px;
  font-weight: 500;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #dbd2d2ac;
}
.drawer-header {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.demo-ruleForm {
    width: 75%;
    max-width: 600px;
}
.avatar-uploader .avatar {
width: 178px;
height: 178px;
display: block;
}
.avatar-uploader{
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.el-upload {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: var(--el-transition-duration-fast);
}
.avatar-uploader:hover {
border-color: var(--el-color-primary);
}
.el-upload:hover {
border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
text-align: center;
}
.updateInformation{
    padding: 20px;
}
.accountInformation{
    width: 75%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 1px;
    margin-bottom: 10px;
    margin-top: 20px;
    /* margin-left: 50px; */
}
.flex-container {

  display: flex; /* 使用 Flexbox 布局 */
  justify-content: flex-end; /* 将子元素靠右对齐 */
  margin-top: -330px; /* 调整元素的垂直位置 */
}
.myAvatar {
  margin-right: 20px; /* 距离右侧 20px */
  display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-avatar {
    /* position: absolute;
    top: 10px; 
    left: 10px;  */
    margin-bottom: 5px;
    width: 60px; /* 头像宽度 */
    height: 60px; /* 头像高度 */
    border-radius: 50%; /* 使头像呈圆形 */
    object-fit: cover; /* 确保图片填充整个容器 */
    transition: filter 0.1s ease;
}
.avatar-wrapper {
  position: relative;
  display: inline-block;
}
/* 鼠标悬停时让头像变暗 */
.avatar-wrapper:hover .profile-avatar {
  filter: brightness(0.5);
}
.change-avatar-text {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
/* 鼠标悬停时显示切换头像的文本 */
.avatar-wrapper:hover .change-avatar-text {
  opacity: 1;
}
.textBox{
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 8px;
}
.firstBox{
    padding-top: 10px;
    margin-bottom: 20px;
}
.secondBox{
    margin-bottom: 20px;
}
:deep(.el-input__wrapper) {
  padding: 0;
  border: none;
}
:deep(.el-input__inner) {
  background-color: #f0f0f0;
}
.el-button{
    margin-left: 120px;
}
:deep(.updateButton){
    margin-left: 20px;
}
:deep(.el-button) {
  background-color: #f1f1f1;
  border: #dbd2d2ac; /* 可根据需要去除边框 */
}
:deep(.el-button:hover) {
  background-color: #f0f0f0;
  color: #474a59;
}
:deep(.el-button:active) {
  background-color: #f1f1f1;
  color: #474a59;
}
:deep(.el-input__inner::-webkit-input-placeholder) {
  padding-left: 20px !important;
}
:deep(.fabu) {
display: block;
margin:  0 auto;
text-align: center;
width: 30%;
font-size:18px;
color: #474a59;
font-weight: 400;
border-color: #dbd2d2ac;
border-bottom: 3px solid #ffffffac;
background-color: #dbd2d2ac;
}
.main{
    width: 70%;
    height: fit-content;
    margin: auto;
    margin-top: 50px;
}
.main-top{
    /* background-color: aquamarine; */
    /* background-image: url("../../assets/picture/infoBJjpg1.jpg"); */
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    border-radius: 10px;
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.top-avatar{
    width: 200px;
    height: 200px;
    border-radius: 30%;
    box-shadow: 0px 0px 12px rgba(73, 73, 73, 0.774);
}
.top-name{
    font-size: 40px;
    margin-bottom: 100px;
    font-weight: 700;
    margin-left: 1em;
    text-shadow: 6px 6px 4px rgba(4, 4, 4, 0.477);
}
.top-update{
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-right: 30px;
    /* background-color: yellowgreen; */
    cursor: pointer;
    background-image: url("../../assets/icon/update.png"); 
    background-size: cover; /* 调整以确保图片覆盖整个元素 */
    background-repeat: no-repeat; /* 确保图片不会重复 */
    background-position: center; /* 可选：居中背景图片 */
}
.top-update:hover{
    background-image: url("../../assets/icon/update-hover.png"); 
}
:deep(.el-card__body){
    padding: 0;
    height: 40px;
    /* background-color: yellowgreen; */
}
.main-center{
    height: 100%;
    /* width: 100%; */
    /* background-color: yellowgreen; */
    display: flex;
    flex-direction: row;
}
.center-menu{
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    /* background-color: yellow; */
    cursor: pointer;
    /* margin-right: 2px; */
}
.center-menu:hover{
    background-color: #dbd2d2ac;
}.center-menu.active{
    background-color: #dbd2d2ac;
}
.main-footer{
    height: fit-content;
    width: 100%;
    /* margin-bottom: 200px; */
    /* padding-bottom: 20px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: yellowgreen; */
}
:deep(.el-card__footer){
    /* margin: 0; */
    padding: 0;
    height: fit-content;
}
.no-content-tip{
    text-align: center;
    color: #666;
    padding: 20px;
}
.postList{
    width: 90%;
    min-height: 30px;
    height: fit-content;
    border-radius: 10px;
    /* position: relative; */
    overflow: hidden;
    /* margin: auto; */
    box-shadow: 0px 0px 8px rgba(73, 73, 73, 0.658);
    display: flex;
    flex-direction: row;
    margin: 10px 0;
    background-color: #dbd2d25d;
}
.postImage{
    width: 350px;
    /* height: 100%; */
    border-radius: 10px;
}
.postBody{
    margin: 10px;
    width: calc(100% - 400px);
    /* width: 300px; */
    /* background-color: turquoise; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.delPost{
    /* height: 100px; */
    width: 50px;
    background-color: #dbd2d2ac;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    writing-mode: vertical-lr;
    cursor: pointer;
}
.delPost:hover{
    background-color: rgba(250, 38, 1, 0.4);
}
.postTitle{
    width: 100%;
    /* line-height: 2; */
}
.postTitle span{
    width:calc(100% - 90px);
    font-size: 25px;
    float: left;
    background:linear-gradient(to right,rgb(222, 153, 153),rgb(161, 161, 111)) no-repeat;
    background-size: 100% 2px;
    background-position:left bottom;
}
.postStatus{
    width: 90px;
    float: right;
    /* right: 0;
    position: absolute; */
    /* background-color: yellowgreen; */
}
.postContent{
    margin-top: 15px;
}
.postTime{
    margin-left: auto;
    color: rgb(86, 86, 86);
    font-size: small;
    margin-top: 5px;
}
.videoList{
    width: 90%;
    min-height: 30px;
    height: fit-content;
    border-radius: 10px;
    /* position: relative; */
    box-shadow: 0px 0px 8px rgba(73, 73, 73, 0.658);
    overflow: hidden;
    /* margin: auto; */
    display: flex;
    flex-direction: row;
    margin: 10px 0;
    /* background-color: yellowgreen */
    background-color: #dbd2d25d;
}
.videoVideo{
    width: 60%;
    /* height: 100%; */
    max-height: 345px;
    border-radius: 10px;
    /* 控制视频内容在容器内的显示方式 */
    object-fit: cover;
}
.videoBody{
    margin:0 0 0 10px;
    width: calc(40% - 60px);
    /* width: 300px; */
    /* background-color: turquoise; */
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
}
.videoTitle{
    width: 100%;
    /* background-color: yellowgreen; */
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
}
.videoTitleSpan{
    /* display: inline; */
    width: calc(100% - 90px);
    font-size: 25px;
    display: flex;
    margin-top: 8px;
    text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
    background:linear-gradient(to right,rgb(222, 153, 153),rgb(161, 161, 111)) no-repeat;
    float: left;
    /* height: 1em; */
    background-size: 100% 2px;
    background-position: left bottom;
    /* height: 1px; */
    /* border-bottom: 1.5px solid #605e5eac; */
}
.videoStatus{
    width: 90px;
    /* background-color: violet; */
    /* float: right; */
    margin-left: auto;
}
.videoContent{
    margin-top: 15px;
    /* 限制文本显示为两行 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 溢出时显示省略号 */
    text-overflow: ellipsis;
}
.videoTime{
    margin-left: auto;
    color: rgb(86, 86, 86);
    font-size: small;
    margin-top: 5px;
}
.title{
    /* position: fixed; */
  /* margin-left: 5%;
  margin-top: 50px; */
  /* margin-right: auto; */
  margin-left: 20px;
  margin-top: 10px;
  border-radius: 10px;
  font-size:24px;
  color: #474a59;
  padding: 0 6px;
  font-weight: 500;
  cursor: pointer;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #ffffffac;
  box-shadow: 0px 0px 4px rgba(73, 73, 73, 0.658);
}
.title.action{
    background-color: #dbd2d2ac;
}
.title:hover{
    background-color: #dbd2d2ac;
}
.activityButton{
    width: 100%;
    height: 45px;
    display: flex;
    flex-direction: row;
}
.myActivity{
    width: 100%;
    /* margin: auto; */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    /* background-color: #90b86d; */
}
.activityList{
    width: 90%;
    min-height: 30px;
    height: fit-content;
    border-radius: 10px;
    /* position: relative; */
    overflow: hidden;
    /* margin: auto; */
    box-shadow: 0px 0px 5px rgba(73, 73, 73, 0.658);
    display: flex;
    flex-direction: row;
    margin: 10px 0;
    background-color: #dbd2d25d;
}
.activityImage{
    width: 350px;
    /* height: 100%; */
    border-radius: 10px;
}
.activityBody{
    margin: 10px;
    width: calc(100% - 400px);
    /* width: 300px; */
    /* background-color: turquoise; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
.activityTop{
    /* background-color: yellowgreen; */
    display: flex;
    flex-direction: row;
    align-items: center;
}
.activityTitle span{
    width: fit-content;
    font-size: 25px;
    background:linear-gradient(to right,rgb(222, 153, 153),rgb(161, 161, 111)) no-repeat;
    background-size: 100% 2px;
    background-position: left bottom;
}
.activityName strong{
    width: fit-content;
    font-size: 17px;
    font-weight: 700;
    background:linear-gradient(to right,rgb(222, 153, 153),rgb(161, 161, 111)) no-repeat;
    background-size: 100% 2px;
    background-position: left bottom;
}
.activityStatus{
    margin-left: auto;
}
.activityStandTime{
    font-size: small;
}
.activityContent{
    margin-top: 10px;
}
.activityTime{
    margin-left: auto;
    color: rgb(86, 86, 86);
    font-size: small;
    margin-top: 5px;
}
.activityJoin{
    margin: auto;
  width: fit-content;
  border-radius: 10px;
  font-size:24px;
  color: #474a59;
  padding: 0 40px;
  font-weight: 500;
  cursor: pointer;
  border-color: #dbd2d2ac;
  border-bottom: 3px solid #dbd2d2ac;
  background-color: #dbd2d2ac;
  box-shadow: 0px 0px 4px rgba(73, 73, 73, 0.658);
}
.activityJoin:hover{
    background-color: #dbd2d2;
}
.activityCaozuo{
    width: 50px;
    /* background-color: #dbd2d2ac; */
    margin-left: auto;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    border-radius: 10px;
    writing-mode: vertical-lr;
}
.del{
    background-color: #dbd2d2ac;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
}
.del:hover{
    background-color: rgba(250, 38, 1, 0.4);
}
.update{
    background-color: #90b86dac;
    height: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    border-radius: 10px;
    cursor: pointer;
}
.update:hover{
    background-color: #90b86d;
}
/* 自定义单选框样式 */
/* 未选中状态 */
::v-deep .el-radio__input.is-checked .el-radio__inner,
::v-deep .el-radio__inner {
  border-color: #ccc; /* 灰色边框 */
  background-color: #fff; /* 白色背景 */
}

/* 选中状态 */
::v-deep .el-radio__input.is-checked .el-radio__inner::after {
  background-color: #ccc; /* 选中时打勾颜色为灰色 */
}

/* 鼠标悬停状态 */
::v-deep .el-radio__inner:hover {
  border-color: #ccc; /* 悬停时边框仍为灰色 */
}

/* 禁用状态 */
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #fff;
  border-color: #ccc;
}

::v-deep .el-radio__input.is-disabled .el-radio__inner::after {
  background-color: #ccc;
}
/* 选中状态下的文字颜色 */
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #232222 !important; /* 选中时文字颜色为灰色 */
}
.updateUserBox{
    /* background-color: #232222; */
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>